import { useState } from "react";
import { cn } from "@/lib/utils";
import { useTheme } from "@/hooks/useTheme";
import { toast } from "sonner";

interface ShareModalProps {
  isOpen: boolean;
  onClose: () => void;
  type: 'project' | 'doc';
  id: string;
  title?: string;
  teamId?: string;
}

export default function ShareModal({ isOpen, onClose, type, id, title, teamId }: ShareModalProps) {
  const { isDark } = useTheme();
  const [copied, setCopied] = useState(false);

  const baseUrl = window.location.origin;
  const shareUrl = type === 'project' 
    ? teamId ? `${baseUrl}/project/${teamId}/${id}` : `${baseUrl}/project/0/${id}`
    : `${baseUrl}/doc/${id}`;

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(shareUrl);
      setCopied(true);
      toast.success('链接已复制到剪贴板');
      setTimeout(() => setCopied(false), 2000);
    } catch (error) {
      console.error('复制失败:', error);
      toast.error('复制失败，请手动复制');
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
      <div className={cn(
        "bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full mx-4",
        "transform transition-all duration-200 ease-out"
      )}>
        {/* 标题栏 */}
        <div className="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
          <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
            {type === 'project' ? '分享项目' : '分享文档'}
          </h3>
          <button
            onClick={onClose}
            className={cn(
              "w-8 h-8 rounded-full flex items-center justify-center transition-colors",
              "hover:bg-gray-100 dark:hover:bg-gray-700"
            )}
          >
            <i className="fa-solid fa-times text-gray-500 dark:text-gray-400"></i>
          </button>
        </div>

        {/* 内容区域 */}
        <div className="p-6">
          <div className="mb-4">
            <p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
              {type === 'project' ? '项目分享链接' : '文档分享链接'}
            </p>
            {title && (
              <p className="text-sm font-medium text-gray-900 dark:text-white mb-2">
                {title}
              </p>
            )}
          </div>

          {/* 链接显示区域 */}
          <div className="mb-4">
            <div className={cn(
              "flex items-center p-3 rounded-lg border",
              "bg-gray-50 dark:bg-gray-700 border-gray-200 dark:border-gray-600"
            )}>
              <input
                type="text"
                value={shareUrl}
                readOnly
                className={cn(
                  "flex-1 bg-transparent text-sm text-gray-900 dark:text-white",
                  "outline-none border-none"
                )}
              />
              <button
                onClick={handleCopy}
                className={cn(
                  "ml-2 px-3 py-1 rounded text-sm font-medium transition-colors",
                  copied
                    ? "bg-green-500 text-white"
                    : "bg-blue-500 hover:bg-blue-600 text-white"
                )}
              >
                {copied ? (
                  <>
                    <i className="fa-solid fa-check mr-1"></i>
                    已复制
                  </>
                ) : (
                  <>
                    <i className="fa-solid fa-copy mr-1"></i>
                    复制
                  </>
                )}
              </button>
            </div>
          </div>

          {/* 说明文字 */}
          <div className="text-xs text-gray-500 dark:text-gray-400">
            <p className="mb-1">
              • 此链接可以分享给任何人，无需登录即可访问
            </p>
            <p className="mb-1">
              • 分享页面为只读模式，无法编辑内容
            </p>
            <p>
              • 如需编辑权限，请邀请用户加入项目
            </p>
          </div>
        </div>

        {/* 底部按钮 */}
        <div className="flex justify-end p-6 border-t border-gray-200 dark:border-gray-700">
          <button
            onClick={onClose}
            className={cn(
              "px-4 py-2 rounded-md font-medium transition-colors",
              "bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600",
              "text-gray-700 dark:text-gray-200"
            )}
          >
            关闭
          </button>
        </div>
      </div>
    </div>
  );
} 